<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">

<head>
    <title>GPS多点沿线运动</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
</head>

<body>
    <div class="map-id" id="mapId">
    </div>
     <link rel="stylesheet" href="/CloundMap/css/dialog.css">
    <script type="text/javascript" src="/CloundMap/map/Init.js"></script>
    
    <script type="text/javascript" src="/CloundMap/js/jquery.js"></script>
    
    <script src="/CloundMap/js/dialog.js"></script>
    <script type="text/javascript">
    $.getJSON('/CloundMap/map/mapConfig.json', mapConfigResult => {
        var mapContainer = document.getElementById('mapId');
        var mapConfig = new MapPlatForm.Base.MapConfig();
        mapConfigResult.mapOpts.defaultZoom = 11;
        var resultJson = mapConfig.createMap(mapContainer, mapConfigResult);
        var map = resultJson.map;
        mapTag = new MapPlatForm.Base.MapTag(map);
    var layer = new NPMapLib.Layers.OverlayLayer("xasas");
    map.addLayer(layer);
    var pt = map.getCenter();
    var distance = new NPMapLib.GisToolKit().getDistanceByProjection(2000, map);
    var points = [];
    var points2 = [];
    for (var i = -5; i < 5; i++) {
        var p = new NPMapLib.Geometry.Point(pt.lon + i * distance, pt.lat);
        points.push(p);
    }
    for (var i = 0; i < 10; i++) {
        var p = new NPMapLib.Geometry.Point(pt.lon + 4 * distance, pt.lat + (9 - i) * distance);
        points2.push(p);
    }
    //var line = new NPMapLib.Geometry.Polyline(points);
    var offset = new NPMapLib.Geometry.Size(0, -12);
    var headerMarker = new NPMapLib.Symbols.Marker(points[0], {
        offset: offset
    });
    var icon = new NPMapLib.Symbols.Icon("../../images/temptracker.png", new NPMapLib.Geometry.Size(29, 29));
    headerMarker.setIcon(icon);

    var headerMarker2 = new NPMapLib.Symbols.Marker(points2[0], {
        offset: offset
    });
    headerMarker2.setIcon(icon);

    var startMarker1 = new NPMapLib.Symbols.Marker(points[0]);
    var starticon = new NPMapLib.Symbols.Icon("../../images/map-marker-start.png", new NPMapLib.Geometry.Size(29, 29));
    startMarker1.setIcon(starticon);

    var startMarker2 = new NPMapLib.Symbols.Marker(points2[0]);
    startMarker2.setIcon(starticon);

    var endMarker = new NPMapLib.Symbols.Marker(points[points.length - 1]);
    var endicon = new NPMapLib.Symbols.Icon("../../images/map-marker-end.png", new NPMapLib.Geometry.Size(29, 29));
    endMarker.setIcon(endicon);
    //多段线
    var polyline = new NPMapLib.Geometry.Polyline(points, {
        color: "blue", //颜色
        weight: 5, //宽度，以像素为单位
        opacity: 0.5, //透明度，取值范围0 - 1
        lineStyle: 'shortdashdotdot' //样式
    });
    var polyline2 = new NPMapLib.Geometry.Polyline(points2, {
        color: "red", //颜色
        weight: 5, //宽度，以像素为单位
        opacity: 0.5, //透明度，取值范围0 - 1
        lineStyle: 'shortdashdotdot' //样式
    });

    var options = {
        speed: 1000, //速度 米/秒
        isReturn: false, //是否往返：若为true，则来回推演
        isRepeat: false //是否重复：若为true，则反复推演
    };

    var animation = null;
    var animation2 = null;

    map.addOverlay(polyline);
    map.addOverlay(polyline2);

    map.addOverlay(startMarker1);
    map.addOverlay(startMarker2);
    map.addOverlay(endMarker);

    if (headerMarker) {
        animation = new NPMapLib.Symbols.Animation(map.id, headerMarker, options);
        animation.setPath(polyline);
        map.addOverlay(headerMarker);
    }
    if (headerMarker2) {
        animation2 = new NPMapLib.Symbols.Animation(map.id, headerMarker2, options);
        animation2.setPath(polyline2);
        map.addOverlay(headerMarker2);
    }
    animation.start();
    animation2.start();
});
    </script>
</body>

</html>
